<script setup>
import { reactive, onMounted, onUnmounted } from 'vue';
import { cameraEles } from '@T2/service/api.ts';
import { MyHomeView } from '../constant.ts';
import EzuikitJs from '../components/ezuikitJs.vue';

const { BIMRat } = defineProps({
  BIMRat: {
    type: Object,
    required: true,
  },
});

const Resd = reactive({
  action: false,
  cameraList: [],
});

let fanScanEffect = null, fanScanEffectConfig = null;
onMounted(() => {
  getCameraList();
  createFanScan();
});
function getCameraList() {
  cameraEles({
    method: 'get',
    params: {
      ordering: '-create_time',
    },
  }).then(res => {
    Resd.cameraList = res?.results || [];
  });
}
/* 创建电子围墙 */
function createFanScan() {
  fanScanEffectConfig = new Glodon.Bimface.Plugins.Animation.FanScanEffectConfig();
  // 配置Viewer对象、方向、持续时间、路径、高度
  fanScanEffectConfig.viewer = BIMRat.viewer3D;
  fanScanEffectConfig.backgroundColor = new Glodon.Web.Graphics.Color(0, 0, 0, 0.05);
  fanScanEffectConfig.color = new Glodon.Web.Graphics.Color(17, 218, 183, 0.8);
  fanScanEffectConfig.duration = 6000;
  fanScanEffectConfig.fanAngle = Math.PI;
  fanScanEffectConfig.radius = 7000;
}

function listTitleClick() {
  initModelViewer();
  Resd.cameraList.forEach(item => item._selected = false);
  if (!Resd.action) {
    Resd.cameraList.forEach(camera => {
      createCameraCustom(camera)
    });
  }
  Resd.action = !Resd.action;
  setVideoCamera({});
  if (fanScanEffect) {
    fanScanEffect.destroy();
    fanScanEffect = null;
  }
}
function handleCamera(camera) {
  Resd.action = true;
  initModelViewer();
  if (camera._selected) {
    camera._selected = false;
    setVideoCamera({});
    return;
  }
  selectSomeCamera(camera);
  const position = createCameraCustom(camera);
  updateFanScan(position);
}
function initModelViewer() {
  BIMRat.model3D.restoreDefault();
  BIMRat.drawableContainer.clear();
  BIMRat.viewer3D.setCameraStatus(MyHomeView);
}
function createCameraCustom(camera) {
  let position = null;
  let [ objectId ] = camera.elementids;
  if (objectId) {
    let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
    let content = document.createElement('div');
    content.innerHTML = `<div class="leadTips jump-4times">
      <div class="tip-box camera-icon">
        <div class="name">${ camera.name }</div>
        <img src="${require('../assets/camera/cameraPosition.png')}" width="43" height="52" />
      </div>
    </div>`;
    config.content = content;
    config.viewer = BIMRat.viewer3D;
    let { max, min } = BIMRat.model3D.getBoundingBoxById(objectId);
    position = { "x": (max.x + min.x) * 0.5, "y": (max.y + min.y) * 0.5, "z": (max.z + min.z) * 0.5 };
    config.worldPosition = position;
    let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
    customItem.onClick(function (e) {
      selectSomeCamera(camera);
      updateFanScan(position);
    });
    BIMRat.drawableContainer.addItem(customItem);
  }
  return position;
}
function selectSomeCamera(camera) {
  setVideoCamera(camera);
  Resd.cameraList.forEach(item => item._selected = item.id === camera.id);
}

/* 显示右侧窗口 */
const video = reactive({
  camera: {},
  enlarge: false,
});
function setVideoCamera(camera) {
  video.camera = camera;
}
function videoSizeChange(newValue) {
  video.enlarge = newValue;
  if (video.enlarge) {
    BIMRat.drawableContainer.clear();
  } else {
    createCameraCustom(video.camera);
  }
}
function closeVideo() {
  setVideoCamera({});
}

/* 创建电子围墙 */
function updateFanScan(position) {
  if (!position) {
    return;
  }
  if (!fanScanEffect) {
    fanScanEffectConfig.originPosition = position;
    fanScanEffect = new Glodon.Bimface.Plugins.Animation.FanScanEffect(fanScanEffectConfig);
  } else {
    fanScanEffect.setOriginPosition(position);
    fanScanEffect.update();
  }
}

onUnmounted(() => {
  fanScanEffect?.destroy();
});
</script>

<template>
  <div class="left">
    <div class="title" @click="listTitleClick()"> <span>视频列表</span> </div>
    <div class="cContainer">
      <div class="clistbox">
        <div
          v-for="camera in Resd.cameraList"
          class="cameraLine"
          :class="{'isActive': camera._selected}"
          @click="handleCamera(camera)"
        >
          <img
            :style="{opacity: camera._selected ? 1 : 0.6}"
            :src="require('../assets/camera/nameIcon.png')"
          />
          <span>{{ camera.name }}</span>
        </div>
      </div>
    </div>
  </div>
  
  <div class="camera-box" :class="video.enlarge ? 'isEnlarge' : 'isSmall'" v-if="video.camera?.id">
    <div class="tLeft"></div>
    <div class="bLeft"></div>
    <div class="tRight"></div>
    <div class="bRight"></div>
    <div class="header-small" v-if="!video.enlarge">
      <span>{{ video.camera.name }}</span>
      <img :src="require('../assets/camera/go_enlarge.png')" @click="videoSizeChange(true)"/>
      <div class="close" @click="closeVideo()">
        <el-icon size="20" color="#b8b8b8"><CloseBold /></el-icon>
      </div>
    </div>
    <div class="header-large" v-else>
      <span>{{ video.camera.name }}</span>
      <img :src="require('../assets/camera/go_small.png')" @click="videoSizeChange(false)"/>
      <div class="close" @click="closeVideo()">
        <el-icon size="20" color="#b8b8b8"><CloseBold /></el-icon>
      </div>
    </div>
    <div class="video-box" :class="video.enlarge ? 'large' : 'small'">
      <ezuikit-js :camera="video.camera" :isEnlarge="video.enlarge" v-if="video.camera.addr"/>
      <span v-else>暂未配置视频流地址！</span>
    </div>
    
  </div>
  
</template>

<style lang="scss" scoped>
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url("/font/优设标题黑.ttf");
}
@keyframes lEnter {
  0% {
    transform: translateX(-450px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  padding-top: 38px;
  padding-left: 24px;
  background: linear-gradient( 270deg, rgba(13,45,45,0) 0%, rgba(34,41,41,0.8) 100%);
  display: flex;
  flex-direction: column;
  animation: lEnter 1s linear 0s;
  -webkit-animation: lEnter 1s linear 0s;
  animation-fill-mode: backwards;
  -webkit-animation-fill-mode: backwards;
  .title {
    position: relative;
    margin-left: 11px;
    width: fit-content;
    display: flex;
    align-items: center;
    cursor: pointer;
    &::after {
      content: ' ';
      width: 120%;
      height: 2px;
      position: absolute;
      background-color: #10FFF9;
      opacity: 0.6;
      left: 0;
      bottom: 0;
    }
    span {
      font-family: YouSheBiaoTiHei;
      font-size: 20px;
      color: #10FFF9;
      letter-spacing: 1px;
    }
  }
  .cContainer {
    background: linear-gradient( 270deg, rgba(13,45,45,0) 0%, rgba(13,45,45,0.5) 100%);
    border-radius: 2px;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(60, 98, 98, 1), rgba(60, 98, 98, 0)) 1 1;
    border-right: none;
    border-left: none;
    width: fit-content;
    max-height: 80%;
    position: relative;
    padding: 24px 6px;
  }
  .clistbox {
    min-width: 210px;
    height: 100%;
    overflow-x: hidden;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .cameraLine {
      margin: 6px 0;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-right: 8px;
        width: 16px;
        height: 16px;
      }
      &.isActive {
        color: #10FFF9;
      }
    }
  }
}

.camera-box {
  display: flex;
  flex-direction: column;
  background: linear-gradient( 180deg, #000000 0%, rgba(0,0,0,0.66) 100%);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
  border: 1px solid #00FED6;
  .tLeft,
  .bLeft,
  .tRight,
  .bRight {
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
  }
  .tLeft {
    top: 0;
    left: 0;
    border-color: #00FED6 transparent transparent transparent;
  }
  .bLeft {
    bottom: 0;
    left: 0;
    border-color: transparent transparent transparent #00FED6;
  }
  .tRight {
    top: 0;
    right: 0;
    border-color: transparent #00FED6 transparent transparent;
  }
  .bRight {
    bottom: 0;
    right: 0;
    border-color: transparent transparent #00FED6 transparent;
  }
  &.isSmall {
    position: absolute;
    right: 39px;
    bottom: 52px;
    width: 380px;/* px-to-viewport-ignore */
    height: 308px;/* px-to-viewport-ignore */
    padding: 0 7px 7px;/* px-to-viewport-ignore */
    .tLeft {
      border-width: 4px 4px 0 0;
    }
    .bLeft {
      border-width: 4px 0 0 4px;
    }
    .tRight {
      border-width: 0px 4px 4px 0px;
    }
    .bRight {
      border-width: 0px 0px 4px 4px;
    }
  }
  &.isEnlarge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    width: 1128px;/* px-to-viewport-ignore */
    height: 719px;/* px-to-viewport-ignore */
    padding: 0 9px 9px;/* px-to-viewport-ignore */
    .tLeft {
      border-width: 8px 8px 0 0;
    }
    .bLeft {
      border-width: 8px 0 0 8px;
    }
    .tRight {
      border-width: 0px 8px 8px 0px;
    }
    .bRight {
      border-width: 0px 0px 8px 8px;
    }
  }
  .header-small {
    height: 50px;/* px-to-viewport-ignore */
    width: 100%;
    padding: 0 12px;
    padding-right: 0;
    display: flex;
    align-items: center;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 22px;
    color: #FFFFFF;
    img {
      margin-left: auto;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .header-large {
    height: 55px;/* px-to-viewport-ignore */
    padding: 0 18px;
    display: flex;
    align-items: center;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 36px;
    color: #FFFFFF;
    img {
      margin-left: auto;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
  }
  .close {
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    margin-left: 10px;
  }
  .video-box {
    border: 1px solid #4E4E4E;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff0000;
    font-family: YouSheBiaoTiHei;
    font-size: 22px;
    &.small {
      width: 366px;/* px-to-viewport-ignore */
      height: 251px;/* px-to-viewport-ignore */
    }
    &.large {
      width: 1110px;/* px-to-viewport-ignore */
      height: 655px;/* px-to-viewport-ignore */
    }
  }
}
</style>